import React from 'react';
import './style/index.less';

import {AutoComplete} from 'antd';

const Option = AutoComplete.Option;

function onSelect(value) {
  console.log('onSelect', value);
}

class Complete extends React.Component {
  state = {
    dataSource: [],
  }

  handleSearch = (value) => {
    this.setState({
      dataSource: !value ? [] : [
        value,
        value + value,
        value + value + value,
      ],
    });
  }

  render() {
    const {dataSource} = this.state;
    return (
      <AutoComplete
        dataSource={dataSource}
        style={{margin: 10, width: 200}}
        onSelect={onSelect}
        onSearch={this.handleSearch}
        placeholder="dataSource 设置"
      />
    );
  }
}

class Complete1 extends React.Component {
  state = {
    result: [],
  }

  handleSearch = (value) => {
    let result;
    if (!value || value.indexOf('@') >= 0) {
      result = [];
    } else {
      result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
    }
    this.setState({result});
  }

  render() {
    const {result} = this.state;
    const children = result.map((email) => {
      return <Option key={email}>{email}</Option>;
    });
    return (
      <AutoComplete
        style={{margin: 10, width: 200}}
        onSearch={this.handleSearch}
        placeholder="Option 设置"
      >
        {children}
      </AutoComplete>
    );
  }
}


export default class AutoCompleteDemo extends React.Component {
  render() {
    return (
      <div className='complete-demo'>
        <Complete/>
        <Complete1/>
      </div>
    );
  }
}

